/** 
  专家评分
*/
<template>
  <div class="experts-score-container">
    <el-card shadow="never" body-style="padding: 24px;">
      <div class="sub-title">{{ $t('baseAssessSetting.baseInfo') }}</div>
      <table class="table-style-baseinfos">
        <tbody>
          <tr>
            <td class="text-right-background-color">{{ $t('baseAssess.internshipBaseName') }}:</td>
            <td class="text-left-background-none">{{ dataListProp.baseName }}</td>
            <td class="text-right-background-color">{{ $t('baseAssessSetting.baseLevel') }}:</td>
            <td class="text-left-background-none">{{ dataListProp.baseLevelName }}</td>
          </tr>
          <tr>
            <td class="text-right-background-color">{{ $t('baseAssess.localProvinceAndCity') }}:</td>
            <td class="text-left-background-none">{{ dataListProp.baseVO.provinceCity }}</td>
            <td class="text-right-background-color">{{ $t('baseAssess.address') }}:</td>
            <td class="text-left-background-none">{{ dataListProp.baseVO.address }}</td>
          </tr>
          <tr>
            <td class="text-right-background-color">{{ $t('baseAssess.startTime') }}:</td>
            <td class="text-left-background-none">{{ dataListProp.baseVO.startTime }}</td>
            <td class="text-right-background-color">{{ $t('baseAssess.endTime') }}:</td>
            <td class="text-left-background-none">{{ dataListProp.baseVO.endTime }}</td>
          </tr>
          <tr>
            <td class="text-right-background-color">{{ $t('templateSetting.assessmentTemplate') }}:</td>
            <td colspan="3" class="text-left-background-none">
              <el-button type="text" @click="selectAssessIndexInfo">{{ dataListProp.baseExamineSettingVO.templateName }}</el-button>
            </td>
          </tr>
          <tr>
            <td class="text-right-background-color">{{ $t('baseAssessSetting.submitMaterialsStart') }}:</td>
            <td class="text-left-background-none">{{ dataListProp.baseExamineSettingVO.submitMaterialsStart }}</td>
            <td class="text-right-background-color">{{ $t('baseAssessSetting.submitMaterialsEnd') }}:</td>
            <td class="text-left-background-none">{{ dataListProp.baseExamineSettingVO.submitMaterialsEnd }}</td>
          </tr>
          <tr>
            <td class="text-right-background-color">{{ $t('baseAssessSetting.onSiteAssessTimeStart') }}:</td>
            <td class="text-left-background-none">{{ dataListProp.baseExamineSettingVO.onSiteExamineStart }}</td>
            <td class="text-right-background-color">{{ $t('baseAssessSetting.onSiteAssessTimeEnd') }}:</td>
            <td class="text-left-background-none">{{ dataListProp.baseExamineSettingVO.onSiteExamineEnd }}</td>
          </tr>
          <tr>
            <td class="text-right-background-color">{{ $t('baseAssessSetting.ratingTimeStart') }}:</td>
            <td class="text-left-background-none">{{ dataListProp.baseExamineSettingVO.scoreStart }}</td>
            <td class="text-right-background-color">{{ $t('baseAssessSetting.ratingTimeEnd') }}:</td>
            <td class="text-left-background-none">{{ dataListProp.baseExamineSettingVO.scoreEnd }}</td>
          </tr>
          <tr>
            <td class="text-right-background-color">{{ $t('baseAssessSetting.examinationDescrip') }}:</td>
            <td class="text-left-background-none" colspan="3">{{ dataListProp.baseExamineSettingVO.examineExplain }}</td>
          </tr>
        </tbody>
      </table>
      <div class="sub-title">{{ $t('baseAssess.submitMaterials') }}</div>
      <el-form class="upload-form" ref="form" :model="form" disabled label-width="80px">
        <el-form-item style="margin-bottom:0;" prop="assessMaterials" :label="$t('baseAssess.assessMaterials')+ ':'">
          <el-upload
            v-model="form.assessMaterials"
            class="upload-container"
            action="/api/commonservice/obsfile/uploadfile"
            :data="uploadConfig.data"
            :on-success="handlerUploadSuccess"
            :before-remove="handlerBeforeRemove"
            :on-remove="handlerRemove"
            :on-error="handlerUploadError"
            :auto-upload="true"
            :on-preview="downloadMaterial"
            multiple
            :limit="5"
            :file-list="fileList">
          </el-upload>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" body-style="padding: 24px;">
      <el-form class="upload-form" ref="scoreForm" :model="scoreForm" label-width="80px">
        <el-form-item prop="score" :label="$t('baseAssess.assessScore')+ ':'" :rules="scoreRulesForm.score">
          <el-input v-model="scoreForm.score" clearable disabled style="width: 200px;"></el-input>
          <el-button type="primary" @click="entryScore">{{ $t('baseAssess.entry') }}</el-button>
        </el-form-item>
        <el-form-item prop="specialistComment" :label="$t('baseAssess.specialistComment')+ ':'" :rules="scoreRulesForm.specialistComment">
          <el-input type="textarea" :rows="5" :maxlength="1000" v-model="scoreForm.specialistComment" clearable style="width: 100%;"></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="dialog-footer">
      <template>
        <el-button @click="back()">{{ $t('common.btn.back') }}</el-button>
        <el-button type="primary" @click="submit()">{{ $t('common.btn.submit') }}</el-button>
      </template>
    </div>
    <!-- 编辑-考核指标表开始 -->
    <el-dialog
      @close="assessIndexInfo = {}"
      :title="$t('templateSetting.assessIndexTable')"
      width="70%"
      append-to-body
      :visible.sync="tableFlag"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <assess-index-table  
        :dataListProp="assessIndexInfo"  
        :showFlag="tableFlag"
        :showWeight="false"
        @close="(flag) => { tableFlag = flag }">
      </assess-index-table>
    </el-dialog>
    <!-- 编辑-考核指标表结束 -->
    <!-- 评分-考核成绩录入表开始 -->
    <el-dialog
      @close="closeScoreTable"
      :title="$t('baseAssess.entry')"
      width="70%"
      append-to-body
      :visible.sync="assessScoreVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <assess-score-table 
        :dataListProp="assessScoreInfo"
        :baseExamineId="expertsScoreInfo.id"
        @confirm-to-close-score-table="closeScoreTable"
        @record-experts-score="recordExpertsScore">
      </assess-score-table>
    </el-dialog>
    <!-- 评分-考核成绩录入表结束 -->
    <el-dialog
      width="25%"
      ref="innerDialog"
      :title="$t('graduateBase.prompt')"
      :visible.sync="innerVisible"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :top="'28vh'">
      <div style="text-align: left;margin-bottom: 25px;">{{$t('graduateBase.cancelTip')}}</div>
      <div style="text-align: right;">
        <el-button type="primary" @click="confirmInner('innerDialog')">{{$t('common.btn.confirm')}}</el-button>
        <el-button @click="cancelInner('innerDialog')">{{$t('common.btn.cancel')}}</el-button>
        <el-button type="primary" @click="confirmAndClose('dialogForm')">{{$t('graduateBase.submitAndClose')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { downloadfile } from "common/src/api/upload";
import assessIndexTable from "../templateSetting/assessIndexTable";
import assessScoreTable from "./assessScoreTable";
import graduateStudentApi from 'common/src/api/graduateStudent/graduateStudent';
export default {
  components: {
    'assess-index-table': assessIndexTable,
    'assess-score-table': assessScoreTable
  },
  props: {
    expertsScoreInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      fileList: [],
      userInfo: {},
      dataListProp: {},
      assessIndexInfo: {},
      tableFlag: false,
      form: {
        assessMaterials: ''
      },
      tableData: [],
      uploadConfig: {
        data: { bucketname: 'face', folderpath: 'file' }
      },
      applyForm: {
        attachFile: [],
        attachName: []
      },
      innerVisible: false,
      scoreForm: {
        score: 0,
        specialistComment: ''
      },
      scoreRulesForm: {
        score: [
          { required: true, message: this.$t('baseAssess.enquireAssessScore'), trigger: 'blur' }
        ],
        specialistComment: [
          { required: true, message: this.$t('baseAssess.requireSpecialistComment'), trigger: 'blur' },
          { validator: this.checkSpecial, trigger: 'blur'}
        ]
      },
      assessScoreInfo: {},
      assessScoreVisible: false
    }
  },
  filters: {
  },
  mounted() {
    // 获取当前用户权限
    let sessiondata = JSON.parse(localStorage.getItem("sessiondata"));
    if (sessiondata) {
      if (sessiondata.mockUser || sessiondata.user) {
        this.userInfo = sessiondata.mockUser || sessiondata.user;
      }
    }
    this.scoreForm.specialistComment = this.expertsScoreInfo.baseGrade.specialistComment;
  },
  methods: {
    // 校验特殊字符$
    checkSpecial(rule, value, callback) {
      let regEn = /[`$]/im;
      if (regEn.test(value)) {
        callback(new Error(this.$t('graduateBase.specialText')))
      } else {
        callback();
      }
    },
    // 内层确认框-确认
    confirmInner() {
      this.innerVisible = false;
      this.$emit('close-edit-dialog');
    },
    // 内层确认框-取消
    cancelInner() {
      this.innerVisible = false;
    },
    // 内层确认框-保存并取消
    confirmAndClose() {
      this.innerVisible = false;
      this.submit('0');
    },
    // 关闭成绩录入表
    closeScoreTable() {
      this.assessScoreInfo = {};
      this.assessScoreVisible = false;
    },
    handlerBeforeRemove(file, fileList) {
      return this.$delConfirm().then(_ => {});
    },
    handlerRemove(file, fileList) {
      let index = this.applyForm.attachFile.indexOf(file.url);
      this.applyForm.attachFile.splice(index, 1);
      this.applyForm.attachName.splice(index, 1);
    },
    handlerUploadSuccess(response, file, fileList) {
      let responseCode = response.code;
      if (responseCode === 200) {
        this.$message({
          message: this.$t('common.tips.uploadSuccess'),
          type: 'success',
        });
        this.applyForm.attachFile.push(
          Object.values(response.data)[0].objectkey
        );
        this.applyForm.attachName.push(
          Object.values(response.data)[0].fileName
        );
        this.$refs['form'].resetFields();
      } else {
        this.$message({
          message: this.$t('graduateBase.uploadFileFail'),
          type: 'error',
        });
      }
    },
    downloadMaterial(file) {
      if (file.url) {
        downloadfile(file.url);
      } else if (file.status === 'success' && file.response.data) {
        downloadfile(file.response.data[file.name].objectkey)
      }
    },
    handlerUploadError(response, file, fileList) {
      this.$message({
        message: this.$t('graduateBase.uploadFail'),
        type: 'error',
      })
    },
    // 查看考核指标表
    selectAssessIndexInfo() {
      this.tableFlag = true;
      graduateStudentApi.querySpecialListAssessIndex({
        "baseExamineId": this.expertsScoreInfo.id,
        "templateId": this.expertsScoreInfo.baseExamineSettingVO.templateId,
        "account": this.userInfo.uid
      }).then(res => {
        if (res.code === 200) {
          this.assessIndexInfo = res.data;
        }
      });
    },
    // 返回
    back() {
      if (this.fileList.length > 0) {
        this.innerVisible = true
      } else {
        this.innerVisible = false;
        this.$emit('close-edit-dialog');
      }
    },
    // 提交
    submit() {
      this.$refs['scoreForm'].validate((valid) => {
        if (valid) {
          graduateStudentApi.submitAssessScore({
            "id": this.expertsScoreInfo.baseGrade.id ? this.expertsScoreInfo.baseGrade.id : this.expertsScoreInfo.baseGradeId,
            "baseExamineId": this.expertsScoreInfo.id,
            "specialistComment": this.scoreForm.specialistComment
          }).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('graduateBase.submitSuccessfully'));
              this.$emit('close-edit-dialog');
            }
          });
        } else {
          setTimeout(() => {
            let isError = document.getElementsByClassName("is-error");
            if (isError[0] && isError[0] && isError[0].querySelector('input')) {
              isError[0].querySelector('input').focus();
            }
          }, 1);
        }
      });
    },
    // 录入考核成绩
    entryScore() {
      graduateStudentApi.querySpecialListAssessIndex({
        "baseExamineId": this.expertsScoreInfo.id,
        "templateId": this.expertsScoreInfo.baseExamineSettingVO.templateId,
        "account": this.userInfo.uid
      }).then(res => {
        if (res.code === 200) {
          this.assessScoreInfo = res.data;
        }
      });
      this.assessScoreVisible = true;
    },
    // 最终记录考核成绩
    recordExpertsScore(val) {
      this.assessScoreVisible = false
      this.scoreForm.score = val.totalScore
      this.expertsScoreInfo.baseGradeId = val.baseGradeId
    }
  },
  watch: {
    expertsScoreInfo: {
      handler(newVal) {
        if (newVal) {
          this.dataListProp = JSON.parse(JSON.stringify(newVal));
          this.scoreForm.score = this.dataListProp.baseGrade.score;
          this.applyForm.attachFile = this.dataListProp.examineMaterial ? this.dataListProp.examineMaterial.split(',') : [];
          this.applyForm.attachName = this.dataListProp.examineMaterialName ? this.dataListProp.examineMaterialName.split(',') : [];
        }
      },
      deep: true,
      immediate: true
    },
    "applyForm.attachName": {
      handler(newVal) {
        if (newVal.length > 0) {
          this.fileList = newVal.map((item, index) => {
            return {
              name: item,
              url: this.applyForm.attachFile[index]
            };
          });
        }
        this.form.assessMaterials = newVal;
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .table-style-baseinfos {
    table-layout: fixed;
    word-break: break-all;
    margin: 0 0 20px 15px;
    background-color: rgba(210, 212, 214, 1);
    box-sizing: border-box;
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(210, 212, 214, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 97%;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #8896a7;
  }
  .table-style-baseinfo {
    table-layout: fixed;
    word-break: break-all;
    background-color: rgba(210, 212, 214, 1);
    box-sizing: border-box;
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(210, 212, 214, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #8896a7;
    margin-bottom: 20px;
  }
  .table-style-baseinfos td {
    width: 25%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #2b3b4e;
    // height: 32px;
    padding: 10px;
  }
  .table-style-baseinfo td {
    // width: 25%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #2b3b4e;
    height: 32px;
    padding: 0 10px;
  }
  .table-style-baseinfos .text-right-background-color {
    background-color: #fdfeff4d;
    text-align: right;
  }
  .table-style-baseinfo .text-right-background-color {
    background-color: #fdfeff4d;
    text-align: right;
  }
  .text-center-background-color {
    background-color: #fdfeff4d;
    text-align: center;
  }
  .text-center-background {
    text-align: center;
  }
  .text-left-background-none {
    text-align: left;
  }
  .sub-title {
    margin: 0 0 15px 5px;
    font-size: 17px;
    color: #2b3b4e;
  }
  .upload-form {
    margin-left: 20px;
  }
  .dialog-footer {
    padding: 20px 20px 5px 0;
    text-align: right;
  }
  .experts-score-container ::v-deep {
    .el-dialog__body {
      word-break: break-all!important;
    }
  }
  .upload-form ::v-deep {
    .el-form-item__content {
      line-height: 0!important;
    }
    .upload-container {
      position: relative;
      top: -10px;
    }
  }
</style>